<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 结构1 */
      /* div > p:last-child {
        color: red;
      } */
      /* 选中div中倒数第n个儿子p元素（按照所有兄弟计算的） */
      /* div > p:nth-last-child(3) {
        color: red;
      } */

      /* 结构2 选中div中倒数第n个儿子p元素（按照所有同类型兄弟计算的） */
      /* div > p:nth-last-of-type(2) {
        color: red;
      } */

      /* 结构3 选中没有兄弟的span元素*/
      /* span:only-child {
        color: red;
      } */

      /* 结构3 选中没有同类型兄弟的span元素*/
      span:only-of-type {
        color: red;
      }

      /* :root 代表跟原生样式，相当于html标签 */
      :root {
        background: gray;
      }

      /* 结构4 选中没有内容的div元素*/
      div:empty {
        width: 200px;
        height: 200px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <!-- 结构1 -->
    <!-- <div>
      <span>ee</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
    </div> -->

    <!-- 结构2 -->
    <!-- <div>
      <span>张三：99分</span>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
      <span>ee</span>
    </div> -->

    <!-- 结构3 -->
    <div>
      <span>22</span>
    </div>
    <div>
      <span>44</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
    </div>

    <!-- 结构4 -->
    <div></div>

    <!-- 结构5 -->
    <!-- <div>
      <span>33</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <span>eee</span>
      <p>赵六：99分</p>
    </div> -->

    <!-- 结构6 -->
    <!-- <div>
      <span>33</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <span>eee</span>
      <p>赵六：99分</p>
    </div> -->
  </body>
</html>
